import React from 'react';
import './WeatherCard.css';

const WeatherCard = ({ weatherData, onRefresh, isLoading }) => {
  if (!weatherData) {
    return null;
  }

  const {
    cityName,
    temperature,
    feelsLike,
    humidity,
    description,
    weatherMain,
    icon,
    windSpeed,
    fromCache,
    timestamp
  } = weatherData;

  // 获取本地天气图标
  const getLocalIcon = (weatherMain) => {
    const iconMap = {
      'Clear': '☀️',
      'Clouds': '☁️',
      'Rain': '🌧️',
      'Drizzle': '🌦️',
      'Thunderstorm': '⛈️',
      'Snow': '❄️',
      'Mist': '🌫️',
      'Fog': '🌫️',
      'Haze': '🌫️'
    };
    return iconMap[weatherMain] || '🌤️';
  };

  // 格式化时间
  const formatTime = (timestamp) => {
    const date = new Date(timestamp);
    return date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  return (
    <div className="weather-card">
      <div className="weather-card-header">
        <h2 className="city-name">{cityName}</h2>
        <button 
          className="refresh-btn"
          onClick={onRefresh}
          disabled={isLoading}
          title="刷新天气信息"
        >
          {isLoading ? '🔄' : '↻'}
        </button>
      </div>

      <div className="weather-main">
        <div className="weather-icon">
          {getLocalIcon(weatherMain)}
        </div>
        <div className="temperature">
          <span className="temp-value">{temperature}</span>
          <span className="temp-unit">°C</span>
        </div>
      </div>

      <div className="weather-description">
        {description}
      </div>

      <div className="weather-details">
        <div className="detail-item">
          <span className="detail-label">体感温度</span>
          <span className="detail-value">{feelsLike}°C</span>
        </div>
        <div className="detail-item">
          <span className="detail-label">湿度</span>
          <span className="detail-value">{humidity}%</span>
        </div>
        <div className="detail-item">
          <span className="detail-label">风速</span>
          <span className="detail-value">{windSpeed} m/s</span>
        </div>
      </div>

      <div className="weather-footer">
        <div className="update-info">
          <span className="update-time">
            更新时间: {formatTime(timestamp)}
          </span>
          {fromCache && (
            <span className="cache-indicator" title="数据来自缓存">
              📦
            </span>
          )}
        </div>
      </div>
    </div>
  );
};

export default WeatherCard;